<template>
  <div class="main_content">
    <el-card class="box-card main">
      <div slot="header"
           class="clearfix">
        <el-menu :default-active="activeIndex.toString()"
                 active-text-color='#1e80ff'
                 class="el-menu-demo"
                 mode="horizontal"
                 @select="handleSelect"
                 text-color='#515767'
                 background-color='#ffffff'>
          <el-menu-item index="0">推荐</el-menu-item>
          <el-menu-item index="1">最新</el-menu-item>
        </el-menu>
      </div>
      <!-- 一个一个 -->
      <el-card class="me-area"
               :body-style="{ padding: '16px' }"
               v-for="item in list"
               :key="item.id">
        <div class="me-article-header">
          <a @click="view(item.id)"
             class="me-article-title">{{item.title}}</a>

        </div>

        <div class="me-artile-description">
          {{item.summary}}
        </div>
        <div class="me-article-footer">
          <span class="me-article-author">
            <i class="me-icon-author"></i>&nbsp;{{item.authorName}}
          </span>
          <el-tag size="mini">{{item.categoryName}}</el-tag>
          <span class=" me-article-count">
            <i class="el-icon-edit"></i>&nbsp;{{item.commentCount}}
          </span>
          <span class=" me-article-count">
            <i class="el-icon-view"></i>&nbsp;{{item.viewCount}}
          </span>
          <span class="me-pull-right me-article-count">
            <i class="el-icon-time"></i>&nbsp;{{formatDate(item.createTime)}}
          </span>

        </div>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import { formatTime } from "../utils/time";
import ArticleApi from "../api/article";

export default {
  data() {
    return {
      activeIndex: 1,
      list: "",
      creatTime: "",
      searchObj: { pageNum: 1 },
      loading: false,
      finished: false,
    };
  },
  methods: {
    // 滚动到页面底部时，请求内容
    scrollBottom() {
      this.loading = false;
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      let clientHeight = document.documentElement.clientHeight;
      let scrollHeight = document.documentElement.scrollHeight;
      let bottomOfWindow = scrollTop + clientHeight >= scrollHeight - 4;
      if (scrollTop != 0 && bottomOfWindow && this.loading == false && this.finished == false) {
        console.log("底部了");
        this.loading = true;

        this.searchObj.pageNum += 1;
        ArticleApi.list(this.searchObj).then((res) => {
          if (res.code == 200) {
            this.loading = false;
            // this.list = result.data.list;
            this.list = this.list.concat(res.data.list); //追加数据
            if (res.data.list.length == 0) {
              //数据全部加载完成
              this.finished = true;
            } else {
              this.finished = false;
            }
          }
        });
      }
    },
    formatDate(datetime) {
      return formatTime(datetime);
    },
    handleSelect(index) {
      // 重置分页排序条件
      this.reset();
      this.searchObj.sortWay = index;
      this.init();
    },
    init() {
      ArticleApi.list(this.searchObj)
        .then((result) => {
          this.list = result.data.list;
        })
        .catch((err) => {});
    },

    updateData(queryKey, way) {
      // way1：分类 
      if (way == 1) {
        if (queryKey == 0) {
          this.searchObj.categoryId = null;
        } else {
          this.searchObj.categoryId = queryKey;
        }
      // way2 key
      } else if (way == 2) {
          this.searchObj.queryKey = queryKey;
      }
      this.reset();
      this.init();
    },
    reset() {
      this.searchObj.pageNum = 1;
      this.finished = false;
    },
  },
  created() {
    this.init();
  },
  mounted() {
    //添加滚动事件，检测滚动到页面底部
    window.addEventListener("scroll", this.scrollBottom);
    // 调用方法，接收分类id
    this.$bus.$on("updateData", this.updateData);
  },

  destroyed() {
    window.removeEventListener("scroll", this.scrollBottom);
  },
};
</script>

<style scoped>
.me-article-header {
  /*padding: 10px 18px;*/
  padding-bottom: 10px;
}

.me-article-title {
  font-weight: 600;
}

.me-article-icon {
  padding: 3px 8px;
}

.me-article-count {
  color: #a6a6a6;
  padding-left: 14px;
  font-size: 13px;
}

.me-pull-right {
  float: right;
}

.me-artile-description {
  font-size: 13px;
  line-height: 24px;
  margin-bottom: 10px;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-article-author {
  color: #a6a6a6;
  padding-right: 2px;
  font-size: 13px;
}

.el-tag {
  margin-left: 6px;
}

.main {
  position: absolute;
  left: 330px;
  top: 80px;
  z-index: 0;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 690px;
}

.item {
  margin-top: 10px;
  margin-right: 40px;
  width: 10px;
  height: 10px;
}
</style>